<template>
  <div class="zhinengjiangben">
    <div
      class="maindiv"
      v-if="$store.state.orgType == 0 || $store.state.orgType == 1"
    > 
    <Znjbdialogtop />
    </div>
    <div class="maindiv" v-else> 
      <Znjbdialogbottom /> 
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import * as echarts from "echarts";
import { Message } from "element-ui";
import { monthDate } from "@/utils/common";
import Znjbdialogtop from "@/components/znjbdialogtop.vue";
import Znjbdialogbottom from "@/components/znjbdialogbottom.vue";
export default {
  props: {},
  components:{Znjbdialogtop,Znjbdialogbottom},
  data() {
    return {
      companyorgcode: "999",
      companyorgname: "",
      zonggongsijiangbenlv: "",
      topdatepicker: ["2023-04", monthDate()],
      gdwjbldatepicker: ["2023-04", monthDate()],
      znjbsondatepicker: ["2023-04", monthDate()],
      prompt: false,
      isbgjb: false,
      company: [],
      form: { company: "", time: [] },
      chartTime: [],
      record: [],
      recordT: [],
    };
  },
  watch: {
    
  },
  mounted() {
    this.$store.state.imgurlsel = require('@/assets/imgs/yellowdownsanjiao.png')
  },
  methods: {
    fenxijb() {
      window.open(
        this.base_url+"/report/sourcing/simple/v?_m=org_sourcing_purchasesavingrate_report&_t=141768&_winid=w2698",
        "_blank"
      );
    },
    getgdwjbldata(num) {
      let xValue = [];
      let yValue = [];
      APIS.Znjb.getCompanyEconomyRate({
        orgCode: this.$store.state.orgCode,
        orgName: this.$store.state.orgName,
        startDate: this.gdwjbldatepicker[0],
        endDate: this.gdwjbldatepicker[1],
      })
        .then((res) => {
          console.log(res, "res");
          res.data.map((item) => {
            let ecomyarr = item.economy.split("%");
            let noone = ecomyarr[0] - 0;
            if (noone > 0) {
              if (item.shortname) {
                xValue.push(item.shortname);
              } else {
                xValue.push(item.orgname);
              }
              yValue.push(noone);
            }
          });

          if (num == 2) {
            let myChart = echarts.init(
              document.getElementById("ecrratedanweijiangben")
            );
            myChart.setOption({
              xAxis: [
                {
                  data: xValue,
                },
              ],
              series: [
                {
                  data: yValue,
                },
              ],
            });
          } else {
            this.columnarChartRenderznjb(xValue, yValue);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getsongdwjbldata(num) {
      let xValue = [];
      let yValue = [];
      APIS.Znjb.getSonCompanyEconomyRate({
        orgCode: this.$store.state.orgCode,
        orgName: this.$store.state.orgName,
        startDate: this.gdwjbldatepicker[0],
        endDate: this.gdwjbldatepicker[1],
      })
        .then((res) => {
          console.log(res, "res");
          res.data.map((item) => {
            let ecomyarr = item.economy.split("%");
            let noone = ecomyarr[0] - 0;
            if (noone > 0) {
              if (item.shortname) {
                xValue.push(item.shortname);
              } else {
                xValue.push(item.orgname);
              }
              yValue.push(noone);
            }
          });

          if (num == 2) {
            let myChart = echarts.init(
              document.getElementById("ecrratedanweijiangben")
            );
            myChart.setOption({
              xAxis: [
                {
                  data: xValue,
                },
              ],
              series: [
                {
                  data: yValue,
                },
              ],
            });
          } else {
            this.columnarChartRenderznjb(xValue, yValue);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getgetEconomyRate(orgCode, orgName) {
      console.log(orgCode, orgName, "orgCode,orgName");
      let arr = [];
      let data = {};
      if (this.$store.state.orgType == 0) {
        data = {
          orgCode: orgCode,
          orgName: orgName,
          startDate: this.topdatepicker[0],
          endDate: this.topdatepicker[1],
        };
      } else {
        data = {
          orgCode: orgCode,
          orgName: orgName,
          startDate: this.znjbsondatepicker[0],
          endDate: this.znjbsondatepicker[1],
        };
      }

      APIS.Znjb.getEconomyRate(data)
        .then((res) => {
          console.log(res, "res");
          if (res.data != null) {
            this.zonggongsijiangbenlv = res.data["economy"];
            for (let i = 0; i < this.$store.state.projectlistarr.length; i++) {
              for (const key in res.data) {
                if (this.$store.state.projectlistarr[i].title === key) {
                  if (key != "economy") {
                    let ecomyarr = res.data[key].split("%");
                    let noone = ecomyarr[0] - 0;
                    if (noone > 0) {
                      arr.push({ percentage: res.data[key], name: key });
                    } else {
                      arr.push({ percentage: "0%", name: key });
                    }
                  }
                }
              }
            }
          } else {
            arr = [
              { percentage: "0%", name: "项目类物资设备" },
              { percentage: "0%", name: "项目类机械租赁" },
              { percentage: "0%", name: "项目类劳务分包" },
              { percentage: "0%", name: "项目类专业分包" },
              { percentage: "0%", name: "项目类服务采购" },
              { percentage: "0%", name: "非项目物资采购" },
              { percentage: "0%", name: "非项目服务采购" },
              { percentage: "0%", name: "非生产经营类" },
            ];
          }
          console.log(arr, "arr");
          this.record = [...arr];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSonCompanyEconomyRate(orgCode, orgName) {
      console.log(orgCode, orgName, "orgCode,orgName");
      let arr = [];
      APIS.Znjb.getEconomyRate({
        orgCode: orgCode,
        orgName: orgName,
        startDate: this.topdatepicker[0],
        endDate: this.topdatepicker[1],
      })
        .then((res) => {
          console.log(res, "res");
          if (res.data != null) {
            this.zonggongsijiangbenlv = res.data["economy"];
            for (let i = 0; i < this.$store.state.projectlistarr.length; i++) {
              for (const key in res.data) {
                if (this.$store.state.projectlistarr[i].title === key) {
                  if (key != "economy") {
                    let ecomyarr = res.data[key].split("%");
                    let noone = ecomyarr[0] - 0;
                    if (noone > 0) {
                      arr.push({ percentage: res.data[key], name: key });
                    } else {
                      arr.push({ percentage: "0%", name: key });
                    }
                  }
                }
              }
            }
          } else {
            arr = [
              { percentage: "0%", name: "项目类物资设备" },
              { percentage: "0%", name: "项目类机械租赁" },
              { percentage: "0%", name: "项目类劳务分包" },
              { percentage: "0%", name: "项目类专业分包" },
              { percentage: "0%", name: "项目类服务采购" },
              { percentage: "0%", name: "非项目物资采购" },
              { percentage: "0%", name: "非项目服务采购" },
              { percentage: "0%", name: "非生产经营类" },
            ];
          }
          console.log(arr, "arr");
          this.recordT = [...arr];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    isconcel1() {
      this.isbgjb = !this.isbgjb;
      const myChart = echarts.init(this.$refs["ecrratedanweijiangben"]);
      if (this.isbgjb) {
        myChart.setOption({
          series: [
            {
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
          ],
        });
      } else {
        myChart.setOption({
          series: [
            {
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
          ],
        });
      }
    },
    columnarChartRenderznjb(xValue, yValue) {
      var myChart = echarts.init(this.$refs["ecrratedanweijiangben"]);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          formatter(params) {
            for (let x in params) {
              return `${params[x].marker} ${params[x].name}:${params[x].data}%`;
            }
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xValue,
            axisLabel: {
              show: true,
              interval: 0,
              // rotate: -30,
              // margin: 30,
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 5; // 一行显示几个字 然后就超过字数就会自动换行
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
              textStyle: {
                // fontSize: 8,
                align: "center",
                color: "#333333",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: false,
              interval: 0,
              rotate: "45",
            },
          },
        ],
        series: [
          {
            name: "单位采购情况",
            type: "bar",
            barWidth: "20%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "black",
                fontSize: 12,
              },
            },
            data: yValue,
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss">
.zhinengjiangben {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
  .maindiv {
    width: 100%;
    height: 100%;
  }
}
</style>
